<template>
  <div class="page-wrapper">
    <!-- 隐藏输入字段 -->
    <input id="topicId" type="hidden" value="1322"/>
    <input id="isAdmin" type="hidden" value=""/>
    <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>

    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep on" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <!-- 主要内容区域 -->
    <div class="test-1 bg-grey mobile-scene-min-width ab-test-min-height">
      <div class="show-header-offset-el banner-section new-light page-main-content">
        <h1 class="banner-title2">制作可持续复用的模板，批量生成二维码</h1>
        <div class="create-tpl-online-wrapper">
          <div class="section-body">
            <div class="banner-card-wrapper">
              <!-- 自有系统数据卡片 -->
              <div class="banner-card no-padding">
                <div class="banner-card-content">
                  <h2 class="banner-card-title my-tpl" id="__static-code-title">
                    适合有自己的系统
                  </h2>
                  <p class="banner-card-desc">
                    免费将自有系统中的数据，批量制作成二维码标签
                  </p>
                  <div class="banner-card-btn-wrapper">
                    <button class="banner-card-btn btn btn-fw btn-outline b-green text-green fixed-size-btn" @click="handleOnlineForm" id="template-code-btn">
                      在线填表批量制作
                    </button>
                    <button class="banner-card-default-btn fixed-size-btn" @click="handleExcelUpload" id="static-code-excel-btn">
                      上传Excel批量制作
                    </button>
                  </div>
                  <div class="banner-card-divider"></div>
                  <div class="img-box">
                    <img alt="数据管理" src="../../assets/images/a6a256b1464e.jpg"/>
                  </div>
                </div>
              </div>

              <!-- 草料活码系统卡片 -->
              <div class="banner-card no-padding">
                <div class="banner-card-content">
                  <h2 class="banner-card-title common-tpl">
                    使用草料活码系统
                  </h2>
                  <p class="banner-card-desc">
                    组合表单、状态、标签等功能，实现一物一码管理
                  </p>
                  <div class="banner-card-btn-wrapper">
                    <router-link class="banner-card-primary-btn btn btn-fw btn-outline fixed-size-btn" to="/qrcode/template" @click="StatisticsData(1,180018)">
                      选择模板，批量生码
                    </router-link>
                    <button class="banner-card-default-btn fixed-size-btn" @click="handleActiveCodeExcel" id="active-code-excel-btn">
                      上传Excel批量制作
                    </button>
                  </div>
                  <div class="banner-card-divider"></div>
                  <div class="img-box">
                    <img alt="模板生码" src="../../assets/images/82513f3f4e91.png"/>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 我的批量模板区域（隐藏） -->
          <div class="section-body hide">
            <div class="m-t-64">
              <span class="template-wrap_title">我的批量模板</span>
              <span class="template-wrap_total">
                共<span class="template-create_modal--total-value"></span>个
              </span>
            </div>
            <div class="template-block_wrap">
              <div class="template-block_create template-block">
                <span class="clifont anticon-new-add"></span>
                创建模板
              </div>
            </div>
            <div class="template-block_fold fold hide">
              <span>展开</span>
              <span class="clifont anticon-cli-angle-down"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页签导航区域 -->
    <div class="tab-file-box bottom-white-line batch-page-article-tab" style="background-color: #fafafa;">
      <div class="page-main-content">
        <div class="nav-fixed-empty"></div>
        <div id="tab-nav">
          <ul class="tab-ul list_tab page-main-content">
            <li class="tab-item noMarginLeft active" data-id="3989" data-name="功能介绍" data-tab-id="3989" data-tab-item="" data-tab-path="info" data-tab-type="blog" data-tab-url="/batch" data-type="批量">
              <router-link to="/qrcode/batch" rel="canonical" title="功能介绍">
                功能介绍
              </router-link>
            </li>
            <li class="tab-item" data-id="3990" data-name="讨论" data-tab-id="3990" data-tab-item="" data-tab-path="comment" data-tab-type="comment" data-tab-url="/batch/comment" data-type="批量">
              <router-link to="/qrcode/batch/comment" id="comment-tab-item" rel="canonical" title="讨论">
                讨论(694)
              </router-link>
            </li>
            <div class="detail_btn_tab inline none" id="detail_btn_tab" style="width: auto;">
              <router-link class="create-tpl-item btn btn-outline create-tpl-lib-create create-tpl-fixed-lib-create" to="/qrcode/template" id="create-tpl-lib-create" title="前往模板库">
                前往模板库，选择模板
              </router-link>
              <button class="create-tpl-item btn btn-outline create-tpl-excel-create create-tpl-fixed-excel-create" @click="handleExcelCreate" id="create-tpl-excel-create">
                上传 Excel，批量生码
              </button>
              <!-- 外部系统链接，保持a标签 -->
              <a class="create-tpl-item btn btn-outline create-tpl-blank-create create-tpl-fixed-blank-create" href="//console.cli.im/nedit/53124761?type=placeholder&amp;categoryId=-11&amp;action=add&amp;create_from=93&amp;pageFrom=tplLibMine&amp;package_id=1570&amp;codeId=53124761&amp;tplId=39109" id="create-tpl-blank-create" target="_blank" title="空白新建模板">
                空白新建模板
              </a>
            </div>
          </ul>
        </div>
      </div>
    </div>

    <!-- 文章内容区域 -->
    <div id="new-blog-container"></div>
    <div class="w-p100 p-b-lg tab-batch-box white tab-content-container">
      <div class="page-main-content white">
        <div class="article-tab-box clearfix" id="article">
          <div class="wordpress-article">
            <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
              <div class="wait-now" id="wait_now" style="display: none;">
                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
              </div>

              <!-- 文章正文内容 -->
              <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                <p>用<strong>"批量模板"</strong>+<strong>"大量数据"</strong>，即可生成一大批二维码。草料提供2种类型的批量生成方式，可根据是否有自有系统、生码内容，以及后期管理需求，按需选择：</p>
                <ul>
                  <li>自有系统数据，需要将数据批量制作成二维码标签；</li>
                  <li>借助草料搭建业务系统，实现人员管理、产品管理等一物一码应用；</li>
                </ul>

                <h2>一、功能概述</h2>
                <h3>1. 什么是批量模板</h3>
                <p>批量模板类似二维码的"模具"，定义了二维码的结构。创建好批量模板后，生码时只需要在表格里填写或者上传excel导入不同的数据信息，系统就将数据自动填入可变内容位置，一次性生成多个结构相同、内容不同的二维码，大大提升效率。<a href="https://blogcdnimg.clewm.net/2023/01/批量模板_16409287071378_20230106_16443127_16729948051623.mp4" rel="noopener" target="_blank" title="查看视频介绍">查看视频介绍</a></p>

                <h3>2. 丰富的标签样式</h3>
                <p>草料提供了一百多种标签样式，涵盖产品介绍、资产标签、人员标牌、设备标牌等多个场景，能满足多样化的业务需求。标签上的文字、背景、logo等均可按需调整。选择对应样式后，填入数据即可生成一批标签。<a href="help/51068.html" title="了解详情">了解详情</a></p>
                <p><img alt="file" data-height="709" data-width="1440" src="../../assets/images/67910108bd6b.png"/></p>

                <h3>2. 批量模板的管理功能</h3>
                <p>模板的展示样式、标签等所有内容均可修改。修改模板将批量更新所有子码。<strong>并且模板可重复使用，多次生码，让后期的成本也能大幅降低</strong>，同时还支持批量管理及更新子码等。</p>

                <div class="wiki-table">
                  <table>
                    <tbody>
                      <tr>
                        <td style="width: 50px"><p>序号</p></td>
                        <td style="width: 168px"><p>教程链接</p></td>
                        <td><p>说明</p></td>
                      </tr>
                      <tr>
                        <td style="width: 50px"><p>1</p></td>
                        <td style="width: 168px">
                          <p><a data-mce-href="https://cli.im/help/83424" data-mce-selected="inline-boundary" href="help/83424.html">修改批量模板</a></p>
                        </td>
                        <td><p>模板中的展示内容，关联的表单、状态等，均可自由修改，修改后子码内容会同步更新</p></td>
                      </tr>
                      <tr>
                        <td style="width: 50px"><p>2</p></td>
                        <td style="width: 168px">
                          <p><a data-mce-href="https://cli.im/help/63251" data-mce-selected="inline-boundary" href="help/63251.html">批量设置标签</a></p>
                        </td>
                        <td><p>模板下所有子码会统一应用批量模板配置的标签样式</p></td>
                      </tr>
                      <tr>
                        <td style="width: 50px"><p>3</p></td>
                        <td style="width: 168px">
                          <p><a data-mce-href="https://cli.im/help/69850" data-mce-selected="inline-boundary" href="help/69850.html">复用模板，新增子码</a></p>
                        </td>
                        <td><p>可复用模板，通过在线表格或上传Excel填入数据，新增一批子码</p></td>
                      </tr>
                      <tr>
                        <td style="width: 50px"><p>4</p></td>
                        <td style="width: 168px">
                          <p><a data-mce-href="https://cli.im/help/82279" data-mce-selected="inline-boundary" href="help/82279.html">批量管理与更新</a></p>
                        </td>
                        <td><p>可批量管理子码和数据，包括导出数据，批量更新子码等</p></td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <h2>二、批量生码类型</h2>
                <p>草料提供2种类型的批量生成方式，可根据是否有自有系统、生码内容，以及后期管理需求，按需选择。</p>

                <h3>1. 自有系统数据，批量制作标签</h3>
                <p>适合已有管理系统，需要将数据（网址、序列号、编码等）生成二维码标签。支持专用设备、专用APP或微信等通用APP扫码。<a href="help/48925.html" title="查看教程">查看教程</a></p>
                <p><strong>支持API对接</strong>，可将草料二维码与企业的内部系统集成，对接标签API后，可在自有系统或网页中，批量生成二维码标签，无需将数据导出再导入草料批量生码，更加高效便捷。<a href="help/86460.html" title="查看API文档">查看API介绍</a></p>

                <h3>2. 借助草料搭建业务，实现一物一码管理</h3>
                <p>适合没有自己的系统，用草料系统搭建应用。支持富文本、表单、状态等功能，可自由组合。模板可随时复用，生成的子码也可以批量管理、批量修改等。<a href="help/61519.html" title="查看详情">查看教程</a></p>

                <h3>3. 两种批量类型详细对比</h3>
                <div class="wiki-table">
                  <table>
                    <tbody>
                      <tr>
                        <td style="width: 107px"></td>
                        <td style="width: 227px"><p><strong>自有系统数据，批量制作标签 </strong></p></td>
                        <td style="width: 239px"><p><strong>借助草料活码，搭建一物一码应用 </strong></p></td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>二维码扫描</p></td>
                        <td style="width: 227px"><p>支持专用设备、专用APP或微信等通用APP扫码</p></td>
                        <td style="width: 239px"><p>手机通用APP扫码（例如微信）</p></td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>生码内容</p></td>
                        <td style="width: 227px">
                          <p>-自有系统中的网址、序列号、编码等内容</p>
                          <p>-仅支持选择一列内容生码</p>
                        </td>
                        <td style="width: 239px">
                          <p>-支持富文本、表单、状态等功能，可自由组合</p>
                          <p>-可将多列内容生码</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>内容编辑</p></td>
                        <td style="width: 227px"><p>内容直接编码，草料平台无法直接修改生码内容</p></td>
                        <td style="width: 239px"><p>内容可随时修改、二维码不变</p></td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>复用模板新增</p></td>
                        <td style="width: 227px"><p>可随时复用设置好的标签样式</p></td>
                        <td style="width: 239px"><p>可随时复用</p></td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>批量管理及更新</p></td>
                        <td style="width: 227px"><p>可批量更新标签样式</p></td>
                        <td style="width: 239px"><p>扫码内容及标签内容均可批量更新</p></td>
                      </tr>
                      <tr>
                        <td style="width: 107px"><p>适合场景</p></td>
                        <td style="width: 227px"><p>适合已有系统，将数据生码</p></td>
                        <td style="width: 239px"><p>没有自己的系统，用草料系统搭建应用</p></td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <h2>三、应用场景</h2>
                <p><strong>一人一码：</strong>员工上岗证、人员信息公示、劳务人员实名制等</p>
                <p><strong>一物一码：</strong>设备巡检与维保、消防设施巡检、设备标牌、车辆管理、资产管理、模具管理等</p>
                <p><strong>其他：</strong>订单流转、工序记录、巡逻巡查、商品标签等</p>
                <p><a href="template.html" title="查看模板库">查看官方模板库</a></p>

                <h2>四、常见问题</h2>
                <h4>1. 批量生成数量是否有限制？</h4>
                <p>生成总量不限，单次批量上限2w个。</p>

                <h4>2. 是否支持批量生成图片、文件二维码？</h4>
                <p>支持，在批量活码模板中添加图片/文件可变内容后，可批量上传文件到各子码中。<a href="help/83546.html" title="查看教程">查看教程</a></p>
                <p>目前暂不支持同时选择多个图片或文件，自动生成一批二维码。</p>

                <h4>3. 生成后是否可以再修改标签？</h4>
                <p>生码后支持修改标签模板，修改后将批量更新模板下所有子码的标签样式。</p>

                <h4>4. 子码能不能脱离模板，转为单个二维码？</h4>
                <p>不能。子码和模板不能解除关联关系，不能自定义子码内容结构。</p>

                <h4>5.在哪里查看已保存的批量活码模板？</h4>
                <p>可登录电脑端管理后台，在左侧菜单中找到【批量活码模板】，所有模板都在这里。你可以在这里用已有模板生码、修改模板、管理模板下的子码等。</p>

                <h2>五、批量生码入口</h2>
                <p>可前往批量生码页面，选择适合的批量生码方式，开始创建批量模板，通过在线填表或上传Excel填入数据，即可生成大量二维码，统一管理。</p>
                <p><a class="wordpressBtn text-white" href="batch.html" title="**批量生码工具**">前往批量生码</a></p>
              </div>
            </div>

            <!-- 侧边导航目录 -->
            <div class="wikiOutlineWrapper">
              <ul class="wikiOutlineContainer">
                <!-- 动态生成导航内容 -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
            <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
            <div id="comment-box"></div>
            <div class="feedback-item clearfix feedback-box">
              <div class="feedback-label">
                回复方式
              </div>
              <div class="feedback-content feedback-content-500">
                <div>
                  <label class="radio-inline">
                    <input id="receiveWechat" name="receiveMethodModal" type="radio" value="wechat"/> 微信快捷接收（推荐）
                  </label>
                  <label class="radio-inline">
                    <input id="receiveEmail" name="receiveMethodModal" type="radio" value="email"/> 邮箱接收
                  </label>
                </div>
                <div class="none m-t" id="email-area">
                  <input class="form-control text-xs" id="email" name="email" placeholder="我们将以邮件形式答复你" type="text" value=""/>
                </div>
                <div class="none m-t text-darkgrey" id="wechat-area">
                  <img alt="" class="m-r" id="wechat-qr" src=""/>
                  <div class="logo-in-qrcode">
                    <img alt="loading" src="../../assets/images/28ae6fb6d9ad.png"/>
                  </div>
                  <div class="scan-success none">
                    <i class="fa fa-check text-green"></i> 已关注
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer" style="border-top: none;">
            <span class="m-l text-danger none" id="error-message"></span>
            <button class="btn btn-outline b-green text-green" data-dismiss="modal" id="publish-cancel-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 11px;width:72px;">取消</button>
            <button class="btn green" data-loading-text="提交中..." id="publish-submit-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 12px;width:72px;">提交</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建模板模态框 -->
    <div aria-hidden="true" class="modal fade" id="templateCreateModal" role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
              <span class="clifont anticon-cli-close-1"></span>
            </button>
          </div>
          <div class="modal-body template-create_modal">
            <div class="template-create_modal--title">创建批量模板</div>
            <div class="template-create_wrap">
              <div class="template-create_block">
                <div class="template-create_block--header">
                  <span class="clifont anticon-cli-batchicon-static" style="color: #3CB067;"></span>
                  <span>静态批量模板</span>
                </div>
                <div class="template-create_block--content">
                  <div class="desc-line">
                    <span class="desc-label">扫码方式</span>
                    <span class="desc-content">无需联网，支持扫描枪或内部APP</span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">扫码效果</span>
                    <span class="desc-content">支持文本、网址，可提供API对接业务系统
                      <a class="cliLink" href="help/70834.html" target="_blank">
                        了解详情
                      </a>
                    </span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">内容修改</span>
                    <span class="desc-content">不可修改</span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">排版落地</span>
                    <span class="desc-content">50+样式模板，批量打印</span>
                  </div>
                </div>
                <button class="template-create_block--btn" @click="createStaticTemplate">创建模板</button>
              </div>
              <div class="template-create_block">
                <div class="template-create_block--header">
                  <span class="clifont anticon-cli-batchicon-dynamic" style="color: #166BC7;"></span>
                  <span>活码批量模板</span>
                </div>
                <div class="template-create_block--content">
                  <div class="desc-line">
                    <span class="desc-label">扫码方式</span>
                    <span class="desc-content">手机联网扫码</span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">扫码效果</span>
                    <span class="desc-content">支持图文、音视频等内容，也可收集信息
                      <a class="cliLink" href="help/61519.html" target="_blank">
                        了解详情
                      </a>
                    </span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">内容修改</span>
                    <span class="desc-content">随时修改，二维码不变</span>
                  </div>
                  <div class="desc-line">
                    <span class="desc-label">排版落地</span>
                    <span class="desc-content">50+样式模板，批量打印</span>
                  </div>
                </div>
                <router-link class="template-create_block--btn" to="/qrcode/template" @click="StatisticsData(137, 200172)">前往模板库，创建模板</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 定义组件名称
defineOptions({
  name: 'BatchPage'
})

// 获取路由实例
const route = useRoute()

// 定义页面元信息
const metaInfo = {
  title: '批量二维码生成器-草料二维码',
  meta: [
    { name: 'description', content: '通过批量模板，实现批量二维码的生成和管理。支持批量生成活码和静态码2种类型的二维码。高效实现一物一码应用，且二维码数量不限，长期有效。' },
    { name: 'keywords', content: '批量二维码,二维码批量,批量二维码生成器,批量生成二维码,批量制作二维码,批量生码,批量静态码,批量生成静态码,批量活码,批量生成活码,批量制作静态码,批量制作活码,批量管理二维码,一物一码,批量二维码工具,在线批量生成二维码,二维码,草料二维码' },
    { name: 'renderer', content: 'webkit' },
    { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
    { property: 'og:title', content: '批量二维码生成器-草料二维码' },
    { property: 'og:description', content: '通过批量模板，实现批量二维码的生成和管理。支持批量生成活码和静态码2种类型的二维码。高效实现一物一码应用，且二维码数量不限，长期有效。' },
    { property: 'og:image', content: 'https://gstatic.clewm.net/caoliao-resource/240407/6b2aef_89bd6906.png' },
    { name: 'referrer', content: 'no-referrer-when-downgrade' }
  ],
  link: [
    { rel: 'canonical', href: 'https://cli.im/batch' },
    { rel: 'icon', href: '../../assets/images/ceba46bf2ecc.ico', type: 'image/x-icon' },
    { rel: 'shortcut icon', href: '../../assets/images/ceba46bf2ecc.ico', type: 'image/x-icon' }
  ]
}

// 响应式数据定义
const account = ref<string>('')
const tokenId = ref<string>('')
const capacityInfo = ref<any>(null)
const isUrl = ref<number>(2)
const fileSize = ref<number>(2)

// 二维码配置
const qrConfig = reactive({
  level: "H",
  size: "280",
  bgcolor: "FFFFFF",
  forecolor: "000000",
  dotcolor_o: "000000",
  dotcolor_n: "000000",
  icon: {
    path: "",
    pos: 0,
    zoom: 0
  }
})

// 配置变量
const config = reactive({
  autoVersion: "1754556853877",
  staticDomain: "//static.clewm.net/cli",
  frontUrl: "//static.clewm.net/nc/front",
  socketApiUrl: 'https://socket.api.cli.im'
})

// 浏览器信息
const browserInfo = reactive({
  ua: '',
  language: ''
})

// 清理函数集合
const cleanupFunctions = ref<Array<() => void>>([])

// 设置全局变量以保持兼容性
const setGlobalVariables = (): void => {
  window.account = account.value
  window.tokenId = tokenId.value
  window.$_isSave = false
  window.front_url = config.frontUrl
  window.$autoVersion = config.autoVersion
}

// 初始化基本功能
const initBasicFeatures = (): void => {
  // 设置页面版本属性
  document.documentElement.setAttribute('auto_version', config.autoVersion)
  
  // 绑定基本事件
  bindBasicEvents()
}

// 初始化浏览器信息
const initBrowserInfo = (): void => {
  browserInfo.ua = navigator.userAgent
  browserInfo.language = navigator.language
  window.__NEW_BROWSER_INFO = browserInfo
}

// 绑定基本事件
const bindBasicEvents = (): void => {
  // Tab切换逻辑 - 使用事件委托，支持router-link，保持原有样式行为
  const tabContainer = document.querySelector('.tab-ul')
  if (tabContainer) {
    const tabClickHandler = (e: Event) => {
      const clickedTab = (e.target as Element).closest('.tab-item') as HTMLElement
      const clickedLink = (e.target as Element).closest('router-link, a') as HTMLElement
      
      if (clickedTab && clickedLink) {
        // 移除所有active状态和相关类名
        const tabItems = document.querySelectorAll('.tab-item')
        tabItems.forEach(tab => {
          tab.classList.remove('active', 'on', 'current')
          const link = tab.querySelector('router-link, a')
          if (link) {
            link.classList.remove('active', 'on', 'current')
          }
        })
        
        // 设置当前active状态 - 使用原有的样式类
        clickedTab.classList.add('active')
        clickedLink.classList.add('on')
      }
    }
    
    tabContainer.addEventListener('click', tabClickHandler)
    
    // 记录清理函数
    cleanupFunctions.value.push(() => {
      tabContainer.removeEventListener('click', tabClickHandler)
    })
  }
}

// 确保router-link与原有CSS完全兼容
const ensureRouterLinkCompatibility = (): void => {
  // 等待DOM完全渲染后执行
  nextTick(() => {
    const routerLinks = document.querySelectorAll('router-link')
    routerLinks.forEach(link => {
      // 确保每个router-link都有正确的样式属性
      const computedStyle = window.getComputedStyle(link)
      
      // 如果router-link没有正确继承样式，强制设置
      if (computedStyle.textDecoration !== 'none') {
        (link as HTMLElement).style.textDecoration = 'none'
      }
      if (computedStyle.color === 'rgb(0, 0, 238)') { // 默认链接蓝色
        (link as HTMLElement).style.color = 'inherit'
      }
      
      // 确保router-link填充整个父容器（如果需要）
      const parent = link.parentElement
      if (parent && parent.tagName === 'LI') {
        (link as HTMLElement).style.display = 'block'
        ;(link as HTMLElement).style.width = '100%'
        ;(link as HTMLElement).style.height = '100%'
      }
    })
  })
}

// 统计数据收集（简化实现）
const StatisticsData = (fir: number, sec: number): void => {
  console.log('StatisticsData called:', fir, sec)
  // 简化实现，保留函数签名，确保页面交互正常
}

// 创建静态模板
const createStaticTemplate = (): void => {
  console.log('Create static template')
  StatisticsData(137, 200171)
  // 简化实现，实际应用中可以触发相应的业务逻辑
}

// 在线填表处理
const handleOnlineForm = (): void => {
  console.log('Handle online form')
  // TODO: 实现在线填表功能
}

// Excel上传处理
const handleExcelUpload = (): void => {
  console.log('Handle excel upload')
  // TODO: 实现Excel上传功能
}

// 活码Excel处理
const handleActiveCodeExcel = (): void => {
  console.log('Handle active code excel')
  // TODO: 实现活码Excel功能
}

// Excel创建处理
const handleExcelCreate = (): void => {
  console.log('Handle excel create')
  // TODO: 实现Excel创建功能
}

// 生成侧边导航目录
const generateOutlineNavigation = (): void => {
  const outlineContainer = document.querySelector('.wikiOutlineContainer')
  if (!outlineContainer) return

  const articleContent = document.querySelector('.wordpress_article_info_box')
  if (!articleContent) return

  // 选择h2和h3标题
  const headers = articleContent.querySelectorAll('h2, h3') as NodeListOf<HTMLHeadingElement>
  if (headers.length === 0) return

  outlineContainer.innerHTML = ''

  headers.forEach((header: HTMLHeadingElement, index: number) => {
    const li = document.createElement('li')
    li.className = 'item'
    li.setAttribute('data-target-header', header.tagName)

    const span = document.createElement('span')
    span.textContent = header.textContent || ''
    li.appendChild(span)

    // 设置标题ID和跳转功能
    const headerId = `batch-heading-${index}`
    if (!header.id) {
      header.id = headerId
    }
    li.setAttribute('data-target-id', header.id)

    // 点击跳转事件
    const clickHandler = () => {
      header.scrollIntoView({ behavior: 'smooth' })

      // 更新active状态
      document.querySelectorAll('.wikiOutlineContainer .item')
        .forEach(item => item.classList.remove('active'))
      li.classList.add('active')
    }
    
    li.addEventListener('click', clickHandler)
    outlineContainer.appendChild(li)
  })
}

// 设置滚动高亮
const setupScrollHighlight = (): void => {
  const headers = document.querySelectorAll('.wordpress_article_info_box h2, .wordpress_article_info_box h3') as NodeListOf<HTMLHeadingElement>
  if (headers.length === 0) return

  const updateActiveNav = (): void => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
    let activeIndex = -1

    headers.forEach((header: HTMLHeadingElement, index: number) => {
      if (header.offsetTop <= scrollTop + 150) {
        activeIndex = index
      }
    })

    document.querySelectorAll('.wikiOutlineContainer .item')
      .forEach((item: Element, index: number) => {
        item.classList.toggle('active', index === activeIndex)
      })
  }

  // 防抖优化
  let scrollTimer: NodeJS.Timeout | null = null
  const scrollHandler = (): void => {
    if (scrollTimer) clearTimeout(scrollTimer)
    scrollTimer = setTimeout(updateActiveNav, 50)
  }

  window.addEventListener('scroll', scrollHandler)
  updateActiveNav() // 初始化

  // 记录清理函数
  cleanupFunctions.value.push(() => {
    window.removeEventListener('scroll', scrollHandler)
  })
}

// 更新导航高亮状态 - 保持原有CSS类名和样式行为
const updateNavigationActive = (): void => {
  const currentPath = route.path
  
  // 更新主导航高亮 - 保持原有的样式类名
  const mainNavLinks = document.querySelectorAll('.sub_nav router-link')
  mainNavLinks.forEach(link => {
    const parentLi = link.closest('li')
    if (parentLi) {
      // 移除所有可能的激活状态类
      parentLi.classList.remove('active', 'on', 'current')
      link.classList.remove('active', 'on', 'current', 'router-link-active', 'router-link-exact-active')
      
      if (link.getAttribute('to') === currentPath) {
        // 添加激活状态 - 使用原有的类名以保持CSS样式
        parentLi.classList.add('active')
        link.classList.add('on') // 保持原有的on类以确保样式正确
      }
    }
  })

  // 更新Tab导航高亮 - 保持原有的样式类名
  const tabNavLinks = document.querySelectorAll('.tab-ul router-link')
  tabNavLinks.forEach(link => {
    const parentLi = link.closest('li')
    if (parentLi) {
      parentLi.classList.remove('active', 'on', 'current')
      link.classList.remove('active', 'on', 'current', 'router-link-active', 'router-link-exact-active')
      
      if (link.getAttribute('to') === currentPath) {
        parentLi.classList.add('active')
        link.classList.add('on')
      }
    }
  })
  
  // 特殊处理：确保批量生码页面的导航项有正确的状态
  if (currentPath.includes('/batch')) {
    const batchNavItem = document.querySelector('.sub_nav router-link[to*="/batch"]')
    if (batchNavItem) {
      batchNavItem.classList.add('on')
      const parentLi = batchNavItem.closest('li')
      if (parentLi) parentLi.classList.add('active')
    }
    
    const batchTabItem = document.querySelector('.tab-ul router-link[to*="/batch"]')
    if (batchTabItem) {
      batchTabItem.classList.add('on')
      const parentLi = batchTabItem.closest('li')
      if (parentLi) parentLi.classList.add('active')
    }
  }
}

// 生命周期
onMounted(() => {
  setGlobalVariables()
  initBasicFeatures()
  initBrowserInfo()

  // 生成侧边导航目录
  nextTick(() => {
    generateOutlineNavigation()
    setupScrollHighlight()
    ensureRouterLinkCompatibility() // 确保router-link样式兼容性
    updateNavigationActive() // 初始化导航状态
  })
})

// 组件卸载时清理
onUnmounted(() => {
  cleanupFunctions.value.forEach(cleanup => cleanup())
  cleanupFunctions.value = []
})

// 监听路由变化
watch(route, (to, from) => {
  console.log('Route changed from', from?.path, 'to', to.path)
  // 更新导航高亮状态
  nextTick(() => {
    updateNavigationActive()
  })
})
</script>

<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/c1a2dbc35903.css" scoped/>
<style src="../../assets/css/0ff6e05882a2.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/4eca4947ec71.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/3b4c1c2135a6.css" scoped/>
<style src="../../assets/css/a1e9de7759bd.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/82dc0233b1fb.css" scoped/>
<style src="../../assets/css/5fd66d82cf52.css" scoped/>
<style src="../../assets/css/52f4b4a7ee30.css" scoped/>

<style scoped>

/* 复制HTML中的内联样式 */
.mobile-scene-min-width {
  min-width: 1200px;
}

.ab-test-min-height {
  min-height: 490px;
}

.test-1 .banner-card-wrapper {
  margin-top: 40px;
}

.test-1 .banner-card-content {
  width: 529px;
  margin: 24px 36px;
}

.test-1 .banner-card {
  width: 593px;
  border: none;
}

.test-1 .banner-card-title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
}

.test-1 .banner-card-title.my-tpl {
  color: #008c33;
}

.test-1 .banner-card-title.common-tpl {
  color: #166bc7;
}

.test-1 .banner-card-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 12px;
  margin-left: 0px;
}

.test-1 .banner-card-btn-wrapper {
  margin-top: 24px;
}

.test-1 .banner-card-divider {
  margin-top: 20px;
}

.test-1 .banner-card-btn.fixed-size-btn,
.test-1 .banner-card-default-btn.fixed-size-btn,
.test-1 .banner-card-primary-btn.fixed-size-btn {
  width: 250px;
}

.test-1 .fixed-size-btn + .fixed-size-btn {
  margin-left: 16px;
}

.test-1 .img-box {
  margin-top: 12px;
  width: 100%;
  height: auto;
}

.test-1 .img-box img {
  width: 100%;
  height: 100%;
}

/* 微信区域样式 */
#wechat-area {
  position: relative;
  height: 100px;
}

#wechat-qr {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}

.logo-in-qrcode {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 20px;
  height: 20px;
}

.logo-in-qrcode img {
  width: 100%;
  height: 100%;
}

.scan-success {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 100px;
  color: rgba(0, 0, 0, 0.87);
}

#email {
  width: 300px;
  border-radius: 4px;
}

.feedback-box .feedback-label {
  font-size: 14px;
  color: #777;
  width: 95px;
  line-height: 38px;
  float: left;
}

.feedback-box .feedback-content-500 {
  width: 408px;
}

.feedback-box .feedback-content {
  max-width: 100%;
  float: left;
}

.feedback-box .feedback-content .radio-inline {
  color: #666;
  margin-top: 10px;
}

#error-message {
  font-size: 12px;
}

.bottom-white-line {
  border-bottom: 1px solid #fff;
}

.lity-content {
  max-width: 96%;
}

.entry-footer-contact-container {
  display: none !important;
}

/* 侧边导航样式 */
.wikiOutlineWrapper {
  width: 260px !important;
  margin-left: 64px !important;
  margin-top: 0 !important;
  position: sticky !important;
  top: 80px !important;
  display: block !important;
  visibility: visible !important;
}

.wikiOutlineContainer {
  position: relative !important;
  font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans', Tahoma, 'Arial', 'simsun', 'sans-serif' !important;
  padding-left: 0 !important;
  border-left: 1px solid rgba(120, 130, 140, 0.1) !important;
  margin: 0 !important;
  display: block !important;
  list-style: none !important;
}

.wikiOutlineContainer .item {
  color: rgba(60, 60, 67, 0.75) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  display: block !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 16px !important;
  transition: color 0.3s !important;
  text-decoration: none !important;
}

.wikiOutlineContainer .item:hover {
  color: #3c3c43 !important;
}

.wikiOutlineContainer .item.active {
  color: rgba(60, 60, 67) !important;
}

.tab-content-container .wikiOutlineContainer .item.active {
  color: #008c33 !important;
}

.wikiOutlineContainer .item.active::before {
  content: ' ' !important;
  width: 2px !important;
  height: 18px !important;
  left: -1px !important;
  background-color: #008c33 !important;
  display: inline-block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 2px !important;
}

/* H3标题缩进处理 */
.wikiOutlineContainer [data-target-header="H3"] + [data-target-header="H3"],
.wikiOutlineContainer [data-target-header="H2"] + [data-target-header="H3"] {
  padding-left: 32px;
}

/* Router-link 样式修复 - 确保与原有a标签样式一致 */
.sub_nav li router-link,
.tab-ul li router-link {
  text-decoration: none !important;
  color: inherit !important;
  display: inline-block !important;
  width: 100%;
  height: 100%;
  padding: inherit;
  margin: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  background: inherit;
  border: inherit;
  transition: inherit;
  box-sizing: border-box;
}

.sub_nav li router-link:hover,
.tab-ul li router-link:hover,
.sub_nav li router-link:visited,
.tab-ul li router-link:visited {
  text-decoration: none !important;
  color: inherit !important;
  background: inherit;
}

/* 重要：确保router-link继承所有父级样式 */
router-link {
  text-decoration: none !important;
  color: inherit !important;
}

/* 特殊类名的router-link样式修复 */
router-link.t06971093650622ab_sep,
router-link.tab_sep,
router-link.template-code,
router-link.banner-card-primary-btn,
router-link.create-tpl-item,
router-link.template-create_block--btn {
  display: inline-block !important;
  text-decoration: none !important;
  color: inherit !important;
  width: auto;
  height: auto;
}

/* 按钮样式统一 */
.banner-card-btn,
.banner-card-default-btn,
.banner-card-primary-btn,
.create-tpl-item,
.template-create_block--btn {
  cursor: pointer;
  border: none;
  background: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: inherit;
  margin: inherit;
  text-decoration: none !important;
  color: inherit !important;
}

.banner-card-btn:focus,
.banner-card-default-btn:focus,
.banner-card-primary-btn:focus,
.create-tpl-item:focus,
.template-create_block--btn:focus {
  outline: none;
}

/* Router-link 激活状态 - 使用原有的样式类 */
.sub_nav li.active router-link,
.sub_nav li router-link.router-link-active,
.sub_nav li router-link.on,
.tab-ul li.active router-link,
.tab-ul li router-link.router-link-active,
.tab-ul li router-link.on {
  /* 继承原有激活状态的所有样式 */
}

/* 确保CSS选择器兼容性 - 同时支持a标签和router-link */
.cli_nav a,
.cli_nav router-link,
.sub_mobile_nav a,
.sub_mobile_nav router-link,
.list_tab a,
.list_tab router-link {
  display: inline-block;
  text-decoration: none !important;
  color: inherit !important;
}

/* 强制覆盖可能影响router-link的全局样式 */
* router-link {
  text-decoration: none !important;
}
</style>
